<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../../css/control.css" />
	<link rel="stylesheet" href="./lifegame_demo_1.css" />
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
	<div id="app" class="main ">
		<!-- 动画区域 -->
		<div class="an-wrap">
			<div class="cells_wrap">
				<div class="cell_row" v-for="(cellsRow_item,cellsRow_index) in cellsToShow" :key="cellsRow_index">
					<div class="cell" :class="'cell_'+cellSize" v-for="(cells_item,cells_index) in cellsRow_item"
						:key="cells_index" @Click="clickCell" :id="[cellsRow_index,cells_index]">
						<div :class="cellsToShow[cellsRow_index][cells_index]==1?'alive_cell':'dead_cell'">
							<!-- {{""+cellsRow_index +","+ cells_index}} -->
						</div>
					</div>
				</div>
			</div>
			<!-- <div class="cell_row" v-for="(cellsRow_item,cellsRow_index) in cells" :key="cellsRow_index" V-if="
				cellsRow_index >= (cellSize=='big'?'45':cellSize=='medium'?'30':cellSize=='small'?'0':'' )
					&&
					cellsRow_index < (cellSize=='big'?'55':cellSize=='medium'?'70':cellSize=='small'?'100':'')
					">
				<div class="cell" :class="'cell_'+cellSize" v-for="(cells_item,cells_index) in cellsRow_item.filter()"
					:key="cells_index" V-if="
						cells_index >= (cellSize=='big'?'45':cellSize=='medium'?'30':cellSize=='small'?'0':'' )
						&&
						cells_index < (cellSize=='big'?'55':cellSize=='medium'?'70':cellSize=='small'?'100':'')
						"></div>
			</div> -->
		</div>

		<!-- 控制区域 -->
		<div class="ct-wrap">
			<div type="button" class="button-blue" @click="autoNextStep">
				<div class="">
					{{autoOrStop}}
				</div>
			</div>
			<div type="button" class="button-red" @click="nextStep">
				<div class="">
					下一步
				</div>
			</div>
			<div type="button" class="button-orange" @click="reset">
				<div class="">
					重置
				</div>
			</div>
			<div type="button" class="button-green" @click="exchangeSize">
				<div class="">
					切换尺寸
				</div>
			</div>
			<!-- <div type="button" class="button-green" @click="exchangeLanguage">
				<div class="">
					切换尺寸
				</div>
			</div> -->
		</div>
	</div>

</body>
<!-- 引入本页js -->
<script src="./lifegame_demo_1.js" type="text/javascript" charset="utf-8"></script>

</html>